import React, { useEffect, useState } from 'react'
import { Card, message, Radio } from 'antd'
import ProForm, { ProFormText } from '@ant-design/pro-form'
import { editWebConfig, getWebConfigDetail } from '@/services/webconfig'
import ProSkeleton from '@ant-design/pro-skeleton'

const AuthLogin = () => {
  // 把获取到的数据存入状态
  const [configer, setConfiger] = useState(null)
  // 获取 auto_authorization 的默认值
  const [value, setValue] = useState(1)

  useEffect(async () => {
    //获取网站配置详情
    const configer = await getWebConfigDetail('authorization_login').then(res => {
      // 获取 auto_authorization 的值
      const list = res.value.authorization_model
      const getRadio = list.auto_authorization ? 'auto_authorization' : list.disable ? 'disable' : 'manual_authorization'
      setValue(getRadio)
      return setConfiger(res.value)
    })
  }, [])

  /**
   * 修改网站配置
   * @param values 表单中输入的数据
   * @returns {Promise<void>}
   */
  const updataWebConfig = async values => {
    /**
     * 定义要修改的字段
     * @type {{cn_name: string, value: {authorization_url, authorization_model: {auto_authorization, disable, manual_authorization}, user_url, client_secret, authorization_token_url, client_id}}}
     */
    const data = {
      'cn_name': '授权登录',
      'value': {
        'user_url': values.user_url,
        'client_id': values.client_id,
        'client_secret': values.client_secret,
        'authorization_url': values.authorization_url,
        'authorization_model': {
          'disable': 'disable' == value,
          'auto_authorization': 'auto_authorization' == value,
          'manual_authorization': 'manual_authorization' == value,
        },
        'authorization_token_url': values.authorization_token_url
      }
    }
    /**
     *  执行修改
     * @type {*}
     */
    const response = await editWebConfig('authorization_login', data)
    if (response.status === undefined) {
      message.success('修改成功')
    }
  }

  /**
   * 单选框改变的方法
   * @param radio
   */
  const onchange = (radio) => {
    let { disable, auto_authorization, manual_authorization } = configer.authorization_model
    setValue(radio.target.value)
  }
  return (
    <div title="输入表单">

      {

        configer === null ?
          <div
            style={{
              background: '#fafafa',
              padding: 24,
            }}
          >
            <ProSkeleton type="list"/>
          </div> :
          <Card>
            <ProForm
              onFinish={values => updataWebConfig(values)}
              initialValues={configer}
              submitter={{
                // 配置按钮的属性
                resetButtonProps: {
                  style: {
                    // 隐藏重置按钮
                    display: 'none',
                  },
                },
              }}
            >
              <ProFormText
                name="user_url"
                label="用户信息地址"
                tooltip="最长为 24 位"
                placeholder="请输入名称"
                rules={[{ required: true, message: '请输入用户信息地址' }]}
              />
              <ProFormText
                name="client_id"
                label="客户端id"
                placeholder="请输入名称"
                rules={[{ required: true, message: '请输入客户端id' }]}
              />
              <ProFormText
                name="client_secret"
                label="客户端秘钥"
                tooltip="最长为 24 位"
                placeholder="请输入名称"
                rules={[{ required: true, message: '请输入客户端秘钥' }]}
              />

              <ProFormText
                name="authorization_url"
                label="授权页面地址"
                tooltip="最长为 24 位"
                placeholder="请输入名称"
                rules={[{ required: true, message: '请输入授权页面地址' }]}
              />
              <h4>授权模型</h4>
              <Radio.Group
                name="authorization_model"
                value={value}
                style={{ marginBottom: '25px' }}
                onChange={onchange}
                rules={[{ required: true, message: '请输入授权模型' }]}
              >
                <Radio value={'disable'}>不启用</Radio>
                <Radio value={'auto_authorization'}>手动授权(有登录页面)</Radio>
                <Radio value={'manual_authorization'}>自动授权(无登录页面)</Radio>
              </Radio.Group>


              <ProFormText
                name="authorization_token_url"
                label="鉴权Token地址"
                tooltip="最长为 24 位"
                placeholder="请输入名称"
                rules={[{ required: true, message: '请输入鉴权Token地址' }]}
              />
            </ProForm>
          </Card>
      }

    </div>
  )
}

export default AuthLogin
